<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>

  <!-- Add to homescreen -->
  <link rel="manifest" href="manifest.json">

  <!-- Fallback to homescreen for Chrome <39 on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Web Starter Kit">
  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
  <meta name="msapplication-TileColor" content="#3372DF">

  <meta name="theme-color" content="#3372DF">

  <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  <!--
  <link rel="canonical" href="http://www.example.com/">
  -->

</head>
<body>
<div class="box" id="box1">
  <h3> Touch Me! </h3>
</div>

<h3 id="statusdiv">Status</h3>
<h2 id="statusdiv2">Status</h2>
The script looks like this:
<script src="components/zepto/zepto.js"></script>
<script>

  window.addEventListener('load', function(){

    var box1 = document.getElementById('box1');
    var statusdiv = document.getElementById('statusdiv');
    var startx = 0;
    var dist = 0;

    box1.addEventListener('touchstart', function (e) {
      console.log(e);
//      var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
//      startx = parseInt(touchobj.clientX); // get x position of touch point relative to left edge of browser
//      statusdiv.innerHTML = 'Status: touchstart ClientX: ' + startx + ' px ';
//      e.preventDefault();
    }, false);

    box1.addEventListener('touchmove', function (e) {
      console.log(e);
//      var touchobj = e.changedTouches[0]; // reference first touch point for this event
//      var dist = parseInt(touchobj.clientX) - startx
//      statusdiv.innerHTML = 'Status: touchmove Horizontal distance traveled: ' + dist + 'px';
      e.preventDefault();
    }, false);
//
//    box1.addEventListener('touchend', function (e) {
//      var touchobj = e.changedTouches[0]; // reference first touch point for this event
//      statusdiv.innerHTML = 'Status: touchend Resting x coordinate: ' + touchobj.clientX + 'px';
//      e.preventDefault();
//    }, false);

  }, false)

</script>
</body>
</html>
